@import 'vars';
@import 'mixin';

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

// body {
//   background-color: #1abc9c;
//   @include size(100vw, 100vh);
//   @include flex();
// }

.main {
  display: flex;
  gap: 10px;
}
.main > section {
  @include size($width, $height);
  position: relative;
  // -webkit-app-region: no-drag;
}
.main > p::after {
  content: ':';
  display: block;
  @include size(10px, $height);
  font: bold $height arial;
  text-align: center;
  line-height: $height;
}
.main > section > div {
  position: absolute;
  &::before,
  &::after {
    display: block;
    border-radius: 5px;
    @include size($width, calc($height/2));
    text-align: center;
    font: bold $height arial;
    overflow: hidden;
    color: $color;
    background-color: $bgColor;
  }
  &::before {
    content: attr(data-after);
    line-height: $height;
  }
  &::after {
    content: attr(data-before);
    line-height: 0;
  }
}
.main > section > div:nth-child(2) {
  @include size($width, calc($height/2));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: 0.5s;
  transform-origin: bottom;
  &::before {
    transform: rotateX(180deg);
    line-height: 0;
    background-color: $bgColor;
  }
  &::after {
    transform: translateY(-100%);
    line-height: $height;
  }
}
.main > section {
  perspective: 200px;
}
.main > section > div:nth-child(2).flipDown {
  animation-name: flipDown;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

// main > section:hover > div:nth-child(2) {
//   transform: rotateX(-180deg);
// }

@keyframes flipDown {
  to {
    transform: rotateX(-180deg);
  }
}
